<template>
	<view class="page-content">
		<card2 v-if="canopyDensity != null" title="林地郁闭度面积" class="m-card">
			<view class="m-card-content f-content">
				<image class="img" src="@/static/mapMonitor/zw.png" mode="widthFix"></image>
				<view class="company">单位：亩</view>
				<view class="flex items">
					<view class="item" v-for="(item, index) in canopyDensity" :key="index">
						<view class="title">{{ item.name }}</view>
						<view class="value">
							<text>{{ item.value }}</text>
						</view>
					</view>
				</view>
				<view class="charts-box">
					<view class="flex charts-title">
						<view class="flex-item title">林地面积变化趋势图</view>
						<view class="unit">单位：%</view>
					</view>
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
				</view>
			</view>
		</card2>
		<card2 v-if="bioDiversity != null" title="生物多样性监测" class="m-card">
			<view class="m-card-content blueBox">
				<view class="item">
					<view class="iteml">
						<view class="left">
							<image class="ilimg" src="@/static/mapMonitor/mapMonitor1.png" mode="aspectFit"></image>
							<view class="colWar">
								<view class="l">植物种类</view>
								<view class="r">
									<text class="num">{{ bioDiversity.d1 }}</text>
									<text class="comp">种</text>
								</view>
							</view>
						</view>
					</view>
					<view class="itemr">
						<view class="colWar">
							<view class="l">植物大致数量</view>
							<view class="r">
								<text class="num">{{ bioDiversity.d2 }}</text>
								<text class="comp">万颗</text>
							</view>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="iteml">
						<view class="left">
							<image class="ilimg" src="@/static/mapMonitor/mapMonitor2.png" mode="aspectFit"></image>
							<view class="colWar">
								<view class="l">动物种类</view>
								<view class="r">
									<text class="num">{{ bioDiversity.d3 }}</text>
									<text class="comp">种</text>
								</view>
							</view>
						</view>
					</view>
					<view class="itemr">
						<view class="colWar">
							<view class="l">动物大致数量</view>
							<view class="r">
								<text class="num">{{ bioDiversity.d4 }}</text>
								<text class="comp">万只</text>
							</view>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="iteml">
						<view class="left">
							<image class="ilimg" src="@/static/mapMonitor/mapMonitor3.png" mode="aspectFit"></image>
							<view class="colWar">
								<view class="l">适宜树种</view>
								<view class="r">
									<text class="num">{{ bioDiversity.d5 }}</text>
									<text class="comp">种</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="iteml">
						<view class="left">
							<image class="ilimg" src="@/static/mapMonitor/mapMonitor4.png" mode="aspectFit"></image>
							<view class="colWar">
								<view class="l">适宜草种</view>
								<view class="r">
									<text class="num">{{ bioDiversity.d6 }}</text>
									<text class="comp">种</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</card2>
		<card2 v-if="ecologicalEngineering != null" title="生态工程" class="m-card">
			<view class="m-card-content r-content">
				<image class="img" src="@/static/mapMonitor/xf.png" mode="widthFix"></image>
				<view class="items">
					<view class="flex flex-middle item">
						<view class="flex-item title">生态工程区域</view>
						<view class="value">
							<picker @change="bindPickerChange" :range="ecologicalEngineering" :value="ecologicalEngineeringIndex" range-key="NAME">
								<view class="uni-input">{{ ecologicalEngineering[ecologicalEngineeringIndex].NAME }}</view>
							</picker>
						</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">开始时间</view>
						<view class="value">
							<text>{{ ecologicalEngineering[ecologicalEngineeringIndex].STIME }}</text>
						</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">预计完成时间</view>
						<view class="value">
							<text>{{ ecologicalEngineering[ecologicalEngineeringIndex].ETIME }}</text>
							个
						</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">物联网点位数量</view>
						<view class="value">
							<text>{{ ecologicalEngineering[ecologicalEngineeringIndex].VALUE }}</text>
							个
						</view>
					</view>
				</view>
			</view>
		</card2>
		<card2 title="生态修复规划" class="m-card" v-if="planList != null">
			<view class="m-card-content r-content">
				<image class="img" src="@/static/mapMonitor/xfgh.png" mode="widthFix"></image>
				<view class="items">
					<view class="flex flex-middle item">
						<view class="flex-item title">待修复区名称</view>
						<view class="value">
							<picker @change="bindPickerChange1" :value="planIndex" :range="planList" range-key="NAME">
								<view class="uni-input">{{ planList[planIndex].NAME }}</view>
							</picker>
						</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">修复方案推荐</view>
						<view class="value">
							<text>{{ planList[planIndex].PROGRAMME }}</text>
						</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">修复过程监督人</view>
						<view class="value">
							<text>{{ planList[planIndex].PEOPLE }}</text>
						</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">监督人电话</view>
						<view class="value">
							<text>{{ planList[planIndex].TEL }}</text>
						</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">修复效果评价</view>
						<view class="value hexagon" :class="[planName[planList[planIndex].EVALUATE]]">
							<view class="text">{{ planList[planIndex].EVALUATE }}</view>
						</view>
					</view>
				</view>
			</view>
		</card2>
		<card2 v-if="EcologicalRestoration != null" title="生态破坏脆弱区分析" class="m-card">
			<view class="m-card-content f-content">
				<image class="img" src="@/static/mapMonitor/st.png" mode="widthFix"></image>
				<view class="flex items">
					<view class="itemBox border1" style="margin-right: 30rpx;">
						<view class="title">脆弱区面积</view>
						<view class="value">
							<text>{{ EcologicalRestoration.d1 }}</text>
							m²
						</view>
					</view>
					<view class="itemBox border1">
						<view class="title">占总面积比例</view>
						<view class="value">
							<text>{{ EcologicalRestoration.d2 }}</text>
							%
						</view>
					</view>
				</view>
				<view class="charts-box">
					<view class="flex charts-title">
						<view class="flex-item title">动态变化</view>
						<view class="unit">单位：%</view>
					</view>
					<canvas canvas-id="canvasLineC" id="canvasLineC" class="charts" @touchstart="touchLineC"></canvas>
				</view>
			</view>
		</card2>
	</view>
</template>

<script>
import card2 from '@/components/card/card2.vue';
import uCharts from '@/components/u-charts/u-charts.js';
let _self, canvaLineA, canvaLineB, canvaLineC;
export default {
	data() {
		return {
			OBJDate: null,
			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			ecologicalEngineeringIndex: 0,
			index: 0,
			planIndex: 0,
			managementData: '',
			planData: '',
			planName: {
				优: 'excellent',
				良: 'good',
				中: 'in',
				差: 'difference'
			}
		};
	},
	computed: {
		canopyDensity: function({ OBJDate }) {
			let value = null;
			if (OBJDate != null) {
				value = OBJDate.ybdjc;
			}
			return value;
		},
		planList: function({ OBJDate }) {
			let value = null;
			if (OBJDate != null) {
				value = OBJDate.stxfgh.datas;
			}
			return value;
		},
		ecologicalEngineering: function({ OBJDate }) {
			let value = null;
			if (OBJDate != null) {
				value = OBJDate.stgc.datas;
			}
			return value;
		},
		EcologicalRestoration: function({ OBJDate }) {
			let value = null;
			if (OBJDate != null) {
				value = {};
				value.d1 = OBJDate.stphfx.find(item => item.KEY === '脆弱区面积');
				value.d1 = value.d1.VALUE;
				value.d2 = OBJDate.stphfx.find(item => item.KEY === '占总面积比例');
				value.d2 = value.d2.VALUE;
			}
			return value;
		},
		bioDiversity: function({ OBJDate }) {
			let value = null;
			if (OBJDate != null) {
				value = {};
				value.d1 = OBJDate.swdyxjc.find(item => item.KEY === '植物种类');
				value.d1 = value.d1.VALUE;
				value.d2 = OBJDate.swdyxjc.find(item => item.KEY === '植物大致数量');
				value.d2 = value.d2.VALUE;
				value.d3 = OBJDate.swdyxjc.find(item => item.KEY === '动物数量');
				value.d3 = value.d3.VALUE;
				value.d4 = OBJDate.swdyxjc.find(item => item.KEY === '动物大致数量');
				value.d4 = value.d4.VALUE;
				value.d5 = OBJDate.swdyxjc.find(item => item.KEY === '适宜树种');
				value.d5 = value.d5.VALUE;
				value.d6 = OBJDate.swdyxjc.find(item => item.KEY === '适宜草种');
				value.d6 = value.d6.VALUE;
			}
			return value;
		}
	},
	components: {
		card2
	},
	onLoad() {
		_self = this;
		this.cWidth = uni.upx2px(630);
		this.cHeight = uni.upx2px(370);
		this.getData();
	},
	methods: {
		getData() {
			this.$$.request(
				{
					url: this.config.getMhsMessage,
					method: 'GET',
					data: {}
				},
				true,
				true
			)
				.then(res => {
					if (res.code == 2000) {
						this.OBJDate = res.data;
						this.vegetationCanvas(res.data.ybdbhqs);
						this.ecologyCanvas(res.data.stphcrq);
					}
				})
				.catch(error => {
					console.log('程序错误', error.message);
				})
				.finally(() => {
					console.log('complate');
				});
		},
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.ecologicalEngineeringIndex = e.target.value;
		},
		bindPickerChange1: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.planIndex = e.target.value;
		},
		setLineOption(data) {
			let option = {
				categories: [],
				series: [
					{
						name: '',
						data: [],
						color: '#F39800'
					}
				]
			};
			option.categories = data.x;
			option.series[0].data = data.data;

			return option;
		},
		setDefaultOption(canvasId, chartData) {
			let opts = {
				$this: _self,
				canvasId: canvasId,
				type: 'area',
				fontSize: 11,
				// padding: [0, 15, 10, 15],
				legend: {
					show: false,
					position: 'top',
					float: 'center',
					itemGap: 30,
					padding: 5,
					lineHeight: 18,
					margin: 0
				},
				dataLabel: false,
				dataPointShape: true,
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				categories: chartData.categories,
				series: chartData.series,
				animation: true,
				xAxis: {
					disableGrid: true,
					type: 'grid',
					gridColor: '#CCCCCC',
					gridType: 'dash',
					dashLength: 8
				},
				yAxis: {
					gridType: 'solid',
					gridColor: '#E5E5E5',
					dashLength: 8,
					splitNumber: 5
				},
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				extra: {
					area: {
						type: 'curve',
						opacity: 0.2,
						addLine: true,
						width: 2,
						gradient: false
					},
					tooltip: {
						showBox: true
					}
				}
			};
			return opts;
		},
		showLineA(canvasId, chartData) {
			let opt = this.setDefaultOption(canvasId, chartData);
			canvaLineA = new uCharts(opt);
		},
		touchLineA(e) {
			canvaLineA.showToolTip(e, {
				format: function(item, category) {
					return category + ' ' + item.name + ':' + item.data;
				}
			});
		},
		showLineC(canvasId, chartData) {
			let opt = this.setDefaultOption(canvasId, chartData);
			canvaLineC = new uCharts(opt);
		},
		touchLineC(e) {
			canvaLineC.showToolTip(e, {
				format: function(item, category) {
					return category + ' ' + item.name + ':' + item.data;
				}
			});
		},
		vegetationCanvas(data) {
			console.log(data);
			if (data.hasOwnProperty('data') && data.hasOwnProperty('x')) {
				let opts = this.setLineOption(data);
				this.showLineA('canvasLineA', opts);
			}
		},
		ecologyCanvas(data) {
			if (data.hasOwnProperty('data') && data.hasOwnProperty('x')) {
				let opts = this.setLineOption(data);
				this.showLineC('canvasLineC', opts);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/common/css/asd.scss';
.charts-box {
	.charts-title {
		padding: 30rpx 0 10rpx;
		font-size: 24rpx;

		.title {
			color: #333;
		}

		.unit {
			color: #999;
		}
	}
}

.charts {
	width: 630rpx;
	height: 370rpx;
	background-color: #ffffff;
}

.page-content {
	background-color: #ffffff;
}

.m-card {
	.m-card-content {
		position: relative;
		.company {
			position: absolute;
			top: 90rpx;
			right: 0;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 1;
		}
		.img {
			display: block;
			margin: 29rpx auto 42rpx auto;
			width: 200rpx;
			height: 140rpx;
		}
	}
	.blueBox {
		padding: 20rpx 0 40rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		.item {
			width: 100%;
			height: 134rpx;
			background-color: #f4f8fe;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding-left: 61rpx;
			box-sizing: border-box;
			&:nth-last-child(2) {
				width: 339rpx;
				margin-bottom: 0;
				// margin-right: 20rpx;
			}
			&:nth-last-child(1) {
				width: 339rpx;
				margin-bottom: 0;
			}
			.iteml {
				flex: 1;
				.left {
					box-sizing: border-box;
					width: 278rpx;
					min-width: 278rpx;
					padding-right: 30rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					.ilimg {
						min-width: 74rpx;
						width: 74rpx;
						height: 74rpx;
					}
					.colWar {
						width: 120rpx;
						min-width: 120rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;
						.l {
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 1;
							margin-bottom: 17rpx;
						}
						.r {
							.num {
								font-size: 36rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #00a0e9;
								line-height: 1;
								margin-right: 7rpx;
							}
							.comp {
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
								line-height: 1;
							}
						}
					}
				}
			}
			.itemr {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				box-sizing: border-box;
				padding-right: 31rpx;
				.colWar {
					display: flex;
					flex-direction: column;
					align-items: stretch;
					justify-content: flex-start;
					.l {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 1;
						margin-bottom: 17rpx;
					}
					.r {
						.num {
							font-size: 36rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #00a0e9;
							line-height: 1;
							margin-right: 7rpx;
						}
						.comp {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							line-height: 1;
						}
					}
				}
			}
		}
	}
	.p-content {
		position: relative;
		padding: 80rpx 0 125rpx;
		margin: -30rpx 0 -30rpx;

		.img {
			width: 292rpx;
		}

		.items {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.item {
			width: 34%;
			margin-top: 40rpx;

			&:nth-child(even) {
				.title,
				.value {
					padding-left: 60rpx;
				}
			}

			&:nth-child(odd) {
				padding-left: 30rpx;
			}
		}

		.title {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			line-height: 1;
		}

		.value {
			font-size: 28rpx;
			color: #999;
			line-height: 1;
			text {
				line-height: 1;
				font-size: 36rpx;
				color: #00a0e9;
			}
		}
	}

	.r-content {
		position: relative;

		.grade {
			position: absolute;
			top: 10rpx;
			left: 50%;
			font-size: 60rpx;
			color: #00dcb0;
			transform: translateX(-50%);
		}

		.flex {
			padding: 0 30rpx;
			margin-bottom: 20rpx;
			height: 70rpx;
			background: #f8f8f8;
			border-radius: 35rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.title {
				font-size: 28rpx;
				color: #333;
			}

			.value {
				font-size: 28rpx;
				font-weight: 700;
				color: #999;

				text {
					font-size: 30rpx;
				}
			}

			.uni-input::after {
				font-family: iconfont;
				content: '\e659';
				margin-left: 10rpx;
				font-size: 24rpx;
			}
		}
	}

	.f-content {
		.items {
			justify-content: space-between;
			margin: 0 -7rpx;
		}
		.itemBox {
			flex: 1;
			height: 120rpx;
			text-align: center;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.item {
			flex: 1;
			// margin: 0 7rpx;
			height: 120rpx;
			text-align: center;
			position: relative;
			&::after {
				content: '';
				position: absolute;
				width: 1rpx;
				height: 74rpx;
				top: 50%;
				transform: translateY(-50%);
				right: 0;
				background-color: #e5e5e5;
			}
			&:nth-last-child(1) {
				&::after {
					width: 0;
					height: 0;
				}
			}
		}

		.title {
			margin-bottom: 10rpx;
			font-size: 28rpx;
			color: #333;
			line-height: 1;
		}

		.value {
			font-size: 28rpx;
			color: #999;
			line-height: 1;

			text {
				line-height: 1;
				font-size: 36rpx;
				color: #00a0e9;
				margin-right: 7rpx;
			}
		}
	}

	.v-content {
		.video {
			margin-bottom: 40rpx;
			width: 100%;
			height: auto;
		}

		.title {
			font-size: 28rpx;
			color: #333;
		}

		.tips {
			font-size: 30rpx;
			color: #787c90;
		}

		.title-bar {
			padding: 0 30rpx;
			margin-bottom: 20rpx;
			height: 70rpx;
			background: #f8f8f8;
			border-radius: 35rpx;
		}

		.content {
			padding: 20rpx 30rpx;
			background: #f8f8f8;
			border-radius: 6rpx;

			.title {
				margin-bottom: 10rpx;
			}
		}
	}
}

.border1 {
	border: 1rpx solid #e5e5e5;
}
</style>
